import React, { useState } from "react";
import "./index.scss";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import {
  Button,
  Form,
  Input,
  Card,
  Breadcrumb,
  Select,
  Radio,
  Upload,
  message,
} from "antd";
import { Link } from "react-router-dom";
import { addArticleAPI } from "@/api/article";
import { PlusOutlined } from "@ant-design/icons";
import { useChannel } from "@/hooks/useChannel";

const { Option } = Select;
function Publish() {
  // 获取并渲染频道列表
  const { channelList } = useChannel();
  // 新增文章逻辑
  const onFinish = async (formValue) => {
    //onFinish表单通过校验时点击提交按钮会触发
    // 拿到用户输入的标题， 内容，频道id， 拿到之后还不够 还需要图片，和模式，还需继续收集
    const { title, content, channel_id } = formValue;
    // 收集后端接口所需要的数据
    const data = {
      title,
      content,
      cover: {
        type: imageType,
        images: channelImage.map((item) => item.response.data),
      },
      channel_id,
    };
    // 判断校验选择的单图多图和无图是否和上传的图片一致
    if (data.cover.type !== data.cover.images.length) {
      return message.error("封面数目与上传图片数量不一致");
    }
    const res = await addArticleAPI(data);
    console.log(res);
    message.success("发布成功");
  };
  // 上传图片逻辑
  const [channelImage, setChannelImage] = useState([]);
  const handleChange = (value) => {
    setChannelImage(value.fileList);
  };
  // 控制选择图片的边框显示与隐藏
  const [imageType, setImageType] = useState(0);
  const onChange = (e) => {
    setImageType(e.target.value);
  };
  return (
    <div>
      {/* 卡片 */}
      <Card bordered={false} className="publish-card">
        {/* 面包屑 */}
        <div className="bread">
          <Breadcrumb
            separator=">"
            items={[
              { title: "发布文章" },
              { title: <Link to="/publish">首页</Link> },
            ]}
          />
        </div>
        <Form
          autoComplete="off"
          validateTrigger="onBlur"
          className="publish-form"
          onFinish={onFinish}
          initialValues={{ type: 0 }}
        >
          {/* 标题 */}
          <Form.Item
            label="标题"
            name="title"
            style={{ width: "50%" }}
            rules={[{ required: true, message: "标题不能为空" }]}
          >
            <Input size="small" placeholder="请输入文章标题" />
          </Form.Item>
          {/* 频道 */}
          <Form.Item
            label="频道"
            name="channel_id"
            style={{ width: "50%" }}
            rules={[{ required: true, message: "频道不能为空" }]}
          >
            <Select placeholder="请选择" size="small">
              {channelList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="封面" name="type" style={{ marginLeft: "12px" }}>
            <Radio.Group onChange={onChange}>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          {imageType !== 0 && (
            <Upload
              name="image"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={true}
              action="http://geek.itheima.net/v1_0/upload"
              maxCount={imageType}
              onChange={handleChange}
            >
              <div className="Publish-avatar">
                <PlusOutlined></PlusOutlined>
              </div>
            </Upload>
          )}
          {/* 内容 */}
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: "内容不能为空" }]}
          >
            <ReactQuill className="publish-quill" placeholder="请输入内容" />
          </Form.Item>

          <Form.Item
            style={{
              display: "flex",
              justifyContent: "start",
              marginLeft: "50px",
            }}
          >
            <Button type="primary" htmlType="提交文章">
              提交文章
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Publish;
